<template>
    <view class="HomePage">
        <image class="bg-image-view" mode="widthFix" :src="getConfig().imageURL(imageURL)"></image>
        <HomeNavigationBarVue></HomeNavigationBarVue>
        <view class="goods_switch_view" v-show="isShowGoodsSwitchView"
              :style="{top: homeNavigationBarHeight + 'px'}"></view>
        <view class="content-view" @scroll="scrollEvent">

            <scroll-view class="scroll-view" :scroll-y="true" @scroll="scrollEvent">
                <SlideshowCell :banners="homeData.flowBanners"></SlideshowCell>
                <image class="hot-ad-view" :src="getConfig().imageURL(homeData.hotAd.thumbUrl)"
                       v-if="homeData.hotAd"></image>
                <MetroCell :metro="homeData.metro"></MetroCell>
                <SplistBannerCell v-for="(banner,index) in homeData.splistBanner"
                                  :banner="banner.homePageSplitBannerConfigVOList"></SplistBannerCell>
                <SplitSelectCell v-for="(value,index) in homeData.splitSelect" :value="value"></SplitSelectCell>
                <NoticeCell :company-letters="homeData.companyLetters"></NoticeCell>
                <SliderCell :items="homeData.recommend"
                            v-model:select-index="homeData.recommendSelectIndex"></SliderCell>
                <HomeGoodsCell :value="goodsList" :list="homeData.recommend"
                               :select-index="homeData.recommendSelectIndex"></HomeGoodsCell>
            </scroll-view>

        </view>
    </view>
</template>

<script setup lang="ts">
import HomeNavigationBarVue from '../view/HomeNavigationBar.vue';
import getConfig from "@/api/config";
import {computed, onMounted, ref} from "vue";
import {onShow} from "@dcloudio/uni-app";
import {homeData, initData} from "@/pages/home/viewModel/HomeViewModel";
import SlideshowCell from "@/pages/home/view/SlideshowCell.vue";
import SplistBannerCell from "@/pages/home/view/SplistBannerCell.vue";
import SplitSelectCell from "@/pages/home/view/SplitSelectCell.vue";
import MetroCell from "@/pages/home/view/MetroCell.vue";
import NoticeCell from "@/pages/home/view/NoticeCell.vue";
import SliderCell from "@/pages/home/view/SliderCell.vue";
import HomeGoodsCell from "@/pages/home/view/HomeGoodsCell.vue";
import NodeInfo = UniNamespace.NodeInfo;
import {debounce} from "@/utility/Tool";

const homeNavigationBarHeight = ref(0)
onShow(() => {
    initData()
})
onMounted(() => {
    uni.createSelectorQuery().in(this)
        .select(".HomeNavigationBar")
        .boundingClientRect((result) => {
            const nodeInfo = result as NodeInfo
            homeNavigationBarHeight.value = nodeInfo.bottom ?? 0
        }).exec();
})
const imageURL = computed(() => {
    return homeData.background?.thumbUrl ?? "/gree-mall-v2/494948dea3f348a2a7558b33632ffae7.jpg.webp"
})
const goodsList = computed(() => {
    if (homeData.recommend.length > 0) {
        return homeData.recommend[homeData.recommendSelectIndex]
    }
    let recommend = {
        current: 0,
        floorName: "",
        floorTitle: "",
        homeRecommendProductVOList: [],
        id: 0,
        localRank: 0,
        pages: 0,
        size: 0,
        storeId: "",
        total: 0
    }
    return recommend
})
const isShowGoodsSwitchView = ref(false)

const self = this

function showGoodsSwitchEvent() {
    uni.createSelectorQuery().in(self)
        .select(".SliderCell")
        .boundingClientRect((result) => {
            const nodeInfo = result as NodeInfo
            if ((nodeInfo.top || 0) <= homeNavigationBarHeight.value) {
                isShowGoodsSwitchView.value = true
            } else {
                isShowGoodsSwitchView.value = false
            }
        }).exec();
}

const scrollEvent = (event: any) => {
    console.log(event.detail.scrollTop)
    console.log(event)
    debounce(showGoodsSwitchEvent, 500)()
}

</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

.HomePage {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;

  .bg-image-view {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
  }

  .content-view {
    flex: 1;
    width: 100%;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    background-color: rgba(227, 227, 227, 0.40);
    position: relative;

    .scroll-view {
      height: 100%;
      width: 100%;
      display: flex;
      overflow: scroll;
      flex-direction: column;
      position: relative;
    

      .hot-ad-view {
        box-sizing: border-box;
        width: 100%;
        height: 88px;
        padding-top: 5px;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
  }

  .goods_switch_view {
    position: absolute;
    height: 60px;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: red;
    z-index: 99;
  }
}
</style>
